<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title> 小米导航栏 </title>
<style>
*{
	margin:0px;
	padding:0px;
}
html,body{
	height:100%;
}
.d1{
	width:100%;
	height:40px;
	background-color:#333;
}
.d1 ul{
	list-style:none;
	margin-left:50px;
}
.d1 ul li{
	float: left;
	width: 70px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
.d1 li a,.d2 li{
	text-decoration: none;
	color:white;
	font-family: 微软雅黑;
	font-size: 10px;
	letter-spacing:5px;
}
.d2 ul li{
	float: right;
	width: 50px;	
	line-height: 40px; 
}
#l1{
	width: 100px;
}
span{
	float: left;
}
.d2 ul li:nth-child(1){
	background:url(./1.png) no-repeat -6px 6px ;
	background-size:30px 30px;
}
</style>
</head>

 <body>
 	<div class="d1">
 	<ul>
      <li><a href="https://www.mi.com/index.html">小米商城<span>|</span></a></li>
      <li><a href="https://www.miui.com/">MLUL<span>|</span></a></li>
      <li><a href="https://iot.mi.com/index.html">loT<span>|</span></a></li>
      <li><a href="https://i.mi.com/">云服务<span>|</span></a></li>
      <li><a href="https://shuidi.mi.com/">水滴<span>|</span></a></li>
      <li><a href="https://jr.mi.com/?from=micom">金融<span>|</span></a></li>
      <li><a href="https://youpin.mi.com/">有品<span>|</span></a></li>
      <li><a href="">SelectRegion<span>|</span></a></li>
 	</ul>
 	<div class="d2">
 		<ul>
 			<li style="width:100px">购物车</li>
 			<li id="l1">消息通知</li>
 			<li>注册<span>|</span></li>
 			<li>登录</li>
 		</ul>
 </div>
 </body>

</html>
